<template>
	<view>
		<!-- 搜索框框区域 -->
		<view class="search-box">
			<uni-search-bar focus :radius="100" cancelButton="none" @input="onInput" :value="keywords"></uni-search-bar>
		</view>
		<view class="search-content">
			<!-- 搜索列表 -->
			<view class="search-list" v-if="searchResults.length !== 0">
				<view
					class="search-list-item"
					v-for="(item, index) in searchResults"
					:key="item.goods_id"
					@click="gotoDetail(item.goods_id)"
				>
					<view class="goods_name">{{ item.goods_name }}</view>
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
			<!--  搜索历史 -->
			<view v-else>
				<view class="search-history">
					<text>搜索历史</text>
					<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
				</view>
				<view class="search-history-results">
					<uni-tag :text="item" v-for="(item, index) in historys" :key="index" @click="gotoGoodsList(item)"></uni-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSearchList } from '@/api/index';
export default {
	name: 'WxShopsIndex',

	data() {
		return {
			// 防抖延时器
			timer: null,
			// 搜索关键词
			keywords: '',
			// 搜索历史数据
			searchHistoryData: [],
			// 搜索结果列表
			searchResults: [],
		};
	},

	onLoad() {
		this.searchHistoryData = JSON.parse(uni.getStorageSync('keywords') || '[]');
	},
	// 计算属性
	computed: {
		historys() {
			return [...this.searchHistoryData].reverse();
		},
	},
	methods: {
		onInput(value) {
			// 清除搜索框的空格问题
			const val = value.replace(/ /g, '');
			// 清除延时器
			clearTimeout(this.timer);
			// 重启延时器
			this.timer = setTimeout(() => {
				// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
				this.keywords = val ? val : '';
				this.getSearchList();
			}, 500);
		},
		// 根据搜索关键词，搜索商品建议列表
		async getSearchList() {
			if (!this.keywords) {
				this.searchResults = [];
				return;
			}
			// 保存存储搜索历史
			this.saveHistoryData();
			const { data: res } = await getSearchList(this.keywords);
			if (res.meta.status !== 200) {
				return uni.$showMsg();
			}
			this.searchResults = res?.message;
		},
		// 保存搜索历史数据
		saveHistoryData() {
			const data = new Set(this.searchHistoryData);
			data.delete(this.keywords);
			data.add(this.keywords);
			this.searchHistoryData = Array.from(data);
			// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
			uni.setStorageSync('keywords', JSON.stringify(this.searchHistoryData));
		},
		// 点击跳转到详情页
		gotoDetail(goods_id) {
			// 指定详情页面的 URL 地址，并传递 goods_id 参数
			uni.navigateTo({
				url: `/pages/goods_detail/index?goods_id=${goods_id}`,
			});
		},
		// 清空搜索历史记录
		cleanHistory() {
			// 清空 data 中保存的搜索历史
			this.searchHistoryData = [];
			uni.removeStorageSync('keywords', '[]');
		},
		// 点击跳转到商品列表页面
		gotoGoodsList(kw) {
			console.log(kw);
			uni.navigateTo({
				url: `/pages/goods_list/index?query=${kw}`,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.search-box {
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: #c00000;
}
.search-content {
	padding: 0 10px;
	.search-list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		padding: 13px 0;
		border-bottom: 1px solid #efefef;
		.goods_name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 3px;
		}
	}
	.search-history {
		display: flex;
		justify-content: space-between;
		padding: 13px 0;
		margin-bottom: 10px;
		border-bottom: 1px solid #efefef;
		text {
			font-size: 14px;
		}
	}
	.search-history-results {
		display: flex;
		flex-wrap: wrap;
		.uni-tag {
			margin-top: 5px;
			margin-right: 5px;
			background-color: #eeeeee;
			border: #eeeeee;
			color: #333;
			font-weight: 400;
		}
	}
}
</style>
